<template>
	<view class="containbox">
			<view class="topfill"></view>
			<view class="centerSection p_rlt padding-top-lg">
				<view class="cinputBox padding-lr-lg">
					<view class="input_itm padding-top-sm flex align-center" :class="{act:focus1}">
						<view class="text-c6 ititle">
							原手机号
						</view>
						<input class="in_input flex-sub" type="number" placeholder-class="plashd" maxlength="11" @focus="tapInput1" @blur="focus1=false" v-model="inputPhone" :focus="focus1" placeholder="请输入手机号或卡号" />
						<!-- <view class="bcheck text-acenter text-white">
							查询
						</view> -->
					</view>
					<view class="input_itm padding-top-sm flex align-center" :class="{act:focus2}">
						<view class="text-c6 ititle">
							验&nbsp;证&nbsp;码
						</view>
						<input class="in_input flex-sub" type="number" placeholder-class="plashd" maxlength="6" @focus="tapInput2" @blur="focus2=false" v-model="inputCode" :focus="focus2" placeholder="请输入6位验证码" />
						<view class="yzcode text-end ">
							获取验证码
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="bottomBtn">
				<view class="submitnBtnBox margin-top">
					<view class="flex align-center">
						<view class="flex-sub text-ngreen padding-left-lg">
							<view class="d_ib padding-lr-sm padding-tb-sm" @click="backPop3()">
								我点错了，返回
							</view>
						</view>
						<view class="sbbtnbox text-white text-sm text-center flex align-center padding-lr-sm">
							<view class="full_btn" @click="bindCardAct()">
								<text>确认</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="full_btn fixed margin-top-sm" @click="confirm">
				解除绑定
			</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';
  const focus1=ref(false)
	const	focus2=ref(false)
	const	shopName=ref('')
	const	inputPhone=ref('')
	const	inputCode=ref('')
	const	rechClass=ref(0)
				
				
	const	tapInput1=()=>{
			focus1.value = true
		}
	const	tapInput2=()=>{
			focus2.value = true
		}
	const	confirm=()=>{
			
		}
</script>

<style lang="scss">
.containbox{
	min-height: 100vh;
}	
.topfill{
	width: 100vw;
	height: 200rpx;
	background: #56BF7A;
}
.centerSection{
	height: 50vh;
	width: calc(100vw - 32rpx);
	margin: 20rpx 0 0 16rpx;
	background: #fff;
	box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	left: 0;
	top: -150rpx;
}

.ititle{
		width: 190rpx;
}
.input_itm{
	height: 120rpx;
	position: relative;
	border-bottom: 1px solid #F3F3F3;
	&.act{
		// border-bottom: 1px solid #56BF7A;
		// box-shadow: 0px 0px 4px #56BF7A;
		&::after{
			content: '';
			position: absolute;
			height: 1px;
			width: 100%;
			left: 0;
			bottom: 0;
			background: #56BF7A;
			box-shadow: 0px 0px 4px #56BF7A;
		}
		
	}
}

.yzcode{
	color: #148A3D;
	width: 160rpx;
}

.cinputBox{
	margin-top: 36rpx;
	.bcheck{
		width: 136rpx;
		height: 46rpx;
		border-radius: 46rpx;
		background: #56BF7A;
	}
}
.plashd{
	color: #D5D5D5;
}


.full_btn{
	width: calc(100vw - 96rpx);
	// margin-left: 38rpx;
}
// .bottomBtn{
// 	width: 100%;
// 	height: 150rpx;
// 	// position: fixed;
// 	left: 0;
// 	bottom: 0;
// 	z-index: 98;
// }

// .sbbtnbox {
// 	width: 390rpx;
// 	.full_btn,
// 	.sublef_new {
// 		line-height: 81rpx;
// 		height: 80rpx;
// 	}
// 	.sublef_new{
// 		background-color: #404040;
// 		border-radius: 50rpx 0 0 50rpx;
// 	}
// 	.subcont {
// 		width: 100%;
// 	}
// 	.subBtn {
// 		border-radius: 0 50rpx 50rpx 0;
// 		// text-align: center;
// 		width: 192rpx;
// 		height: 80rpx;
// 		line-height: 81rpx;
// 		background-color: #56bf7a;
// 		// font-size: 28rpx;
// 		&.gry {
// 			background: #d0cfcf;
// 		}
// 		&.ban {
// 			opacity: 0.88;
// 		}
// 		&.sure{
// 			line-height: 1;
// 		}
// 	}
// }
</style>